<template>
	<view>
		<!-- 这是登录页面 -->
		<u-image :showLoading="true" :src="src" width="750rpx" height="600rpx"></u-image>
		<!-- 登录按钮 -->
		<view class="LoginBottom">
			<view class="MyLogin">
				<text class="text">请完成微信授权以继续使用</text>
				<u-button type="primary" text="授权微信用户信息" iconColor="#5b92fd" shape="circle" size="36rpx"
					@click="loginClick"></u-button>
			</view>
		</view>
		<!-- 登录模态框 -->
		<u-popup :show="popupVisible" mode="center" @close="close">
			<view>
				<u-form :model="form" ref="uForm">
					<u-form-item label="手机号 :" prop="username">
						<u-input v-model="form.username" />
					</u-form-item>
					<u-form-item label="密码 :" prop="password">
						<u-input v-model="form.password" />
					</u-form-item>
				</u-form>
				<!-- 提交按钮  -->
				<button class="custom-style" @click="submit">提交</button>
			</view>
		</u-popup>
		<!-- 用户协议 -->
		<u-checkbox-group class="agreeOn_btm">
			<u-checkbox v-model="checked" shape="circle" size="30rpx" @change="changeCheckout">
			</u-checkbox>
		</u-checkbox-group>
		<text class="agree_btm">已阅读并同意<text class="agree_on">《住建业 用户协议》</text></text>
	</view>
</template>

<script>
	const avatar = "https://img2.baidu.com/it/u=4248533344,2295565255&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=710"
	// 手机号正则
	const mPattern = /^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0,5-9]))\d{8}$/;

	//密码强度正则，最少6位，包括至少1个大写字母，1个小写字母，1个数字，1个特殊字符
	const pPattern = /^.*(?=.{6,})(?=.*\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*? ]).*$/;

	export default {
		data() {
			return {
				// 图片地址
				src: avatar,
				// 勾选框状态
				checked: false,
				// 弹出框控制
				popupVisible: false,
				// 用户昵称
				nickname: "",
				// 用户信息
				form: {
					username: '',
					password: ''
				},
				// 用户登录表单-
				rules: {
					username: [{
						required: true,
						message: '请输入用户名',
						trigger: ['blur', 'change']
					}],
					password: [{
						required: true,
						message: '请输入密码',
						trigger: ['blur', 'change']
					}],
				},
			}
		},
		methods: {
			// 勾选
			changeCheckout() {
				this.checked = !this.checked
				// console.log(this.checked);
			},
			// 显示弹出框
			showPopup() {
				this.popupVisible = true
				this.$nextTick(() => {
					// console.log(this.$refs.uForm);
					this.$refs.uForm.setRules(this.rules)
				})
			},
			// 隐藏弹出框
			close() {
				this.popupVisible = false
			},
			// 登录提交
			submit() {
				// 提供表单的基本校验
				this.$refs.uForm.validate().then(res => {

					//手机号正则
					// console.log(this.form.username);
					// if(mPattern.test(this.form.username)){
					// 	console.log('成功');
					// }
					if (res) {
						// console.log('验证成功');
						// 发请求
						this.$api({
							url: '/user',
							successCB: res => {
								// console.log(res);
								// console.log(res.data.data);
								// console.log(res.data.token);
								let {
									token,
									userInfo,
								} = res.data.data
								// console.log(token);
								let {
									avatar,
									nickname,
								} = userInfo
								// console.log(avatar);
								uni.setStorageSync('token', token)
								uni.setStorageSync('userInfo', userInfo)
								// this.nickname = nickname

								this.form.username = ''
								this.form.password = ''
								// 关闭登录框
								this.popupVisible = false
								// uni.switchTab({
								// 	url:'/pages/user/user'
								// })
								uni.showToast({
									title: '登录成功',
									duration: 2000,
									icon: 'none'
								})
								setTimeout(() => {
									uni.switchTab({
										url: '/pages/user/user'
									})
								}, 1500)
							}
						})
					}
				})

			},
			// 点击登录
			loginClick() {
				if (this.checked) {
					// console.log("登陆成功");
					this.showPopup()
				} else {
					// uni.showModal({
					// 	title: '提示',
					// 	content: '请阅读并勾选底部协议',
					uni.showToast({
						title: '请阅读并勾选底部协议',
						duration: 2000,
						icon: 'none',
						success: function(res) {
							if (res.confirm) {
								// console.log('用户点击确定');
								// console.log('勾选');
							} else if (res.cancel) {
								// console.log('用户点击取消');
							}
						}
					});
				}
			}
		},
	}
</script>

<style lang="scss">
	.LoginBottom {
		text-align: center;

		.MyLogin {
			padding: 20rpx 40rpx;

			.text {
				display: block;
				margin: 20rpx;
				color: #999;
			}
		}
	}

	.agreeOn_btm {
		text-align: center;
		position: absolute;
		bottom: 4%;
		left: 20%;
	}

	/deep/.u-checkbox__icon-wrap {
		text-align: center;
		position: absolute;
		bottom: 4%;
		left: 20%;
	}

	.agree_btm {
		position: absolute;
		bottom: 4%;
		left: 25%;
		font-size: 24rpx;

		.agree_on {
			color: #5b92fd;
		}
	}

	.u-page {
		padding: 0;
	}

	.u-cell-icon {
		width: 36rpx;
		height: 36rpx;
		margin-right: 8rpx;
	}

	.u-cell-group__title__text {
		font-weight: bold;
	}

	// 弹出框样式u-popup__content
	/deep/.u-popup__content {
		width: 70%;
		padding: 60rpx;
		border-radius: 40rpx;
	}

	/deep/.u-form-item__body__left__content__label {
		width: 140rpx;
	}

	/deep/ .u-input__content__field-wrapper__field {
		padding-left: 60rpx;
	}

	// 表单校验提示
	/deep/ .u-form-item__body__right__message {
		margin-left: 120rpx !important;
	}

	// 提示框
	/deep/ .uni-modal {
		border-radius: 40rpx !important;
	}

	.custom-style {
		width: 100%;
		background: #5b92fd;
		color: #fff;
		border-radius: 40rpx;
		margin-top: 40rpx;
	}
</style>
